<template>
	<view class="pages">
		<view class="phone-code">
			<view class="phone-input">
				<view class="left-area-code">
					+86<image src="../../static/search/shaixuandown.png" mode=""></image>
				</view>
				<view class="center-lines"></view>
				<input maxlength="11" v-model="bindData.mobile" class="phone input-box-phone"
					placeholder-class="placeholderStyle" type="number" placeholder="请输入手机号码" />
			</view>

			<view class="phone-input">
				<input maxlength="6" v-model="bindData.code" class="code-input" type="number"
					placeholder-class="placeholderStyle" placeholder="请输入验证码" />
				<view id="view" :class="isSend ? 'sen-code-btn success-send':'sen-code-btn '" :disabled="isSend"
					@click="sendCode">{{sendcodetext}}</view>
			</view>
		</view>
		<button :disabled="isDisabled" @click="login" class="login-btn">
			立即绑定
		</button>
		<view class="login-agreement">
			<view style="font-size: 36rpx;">
				<uni-icons @click="checked = !checked" :color="checked? '#EF5233':'#979797'"
					:type="checked?'checkbox-filled':'checkbox'" size="18"></uni-icons>
			</view>
			我已阅读并同意 <navigator url="/otherpages/agreement/userAgreement">《服务条款》</navigator>
			<navigator url="/otherpages/agreement/userAgreement">《隐私政策》</navigator>
		</view>
	</view>
</template>

<script>
	var time = 60;
	export default {
		data() {
			return {
				bindData: {
					mobile: "",
					code: ""
				},
				isSend: false,
				sendcodetext:"获取验证码",
				checked:false,
				isDisabled:false
			}
		},
		methods: {
			sendCode() {
				let that = this
				if (this.$util.phoneVerify(this.bindData.mobile)) {
					this.isSend = true
					this.request.httpTokenRequest({
						url: "index/sendSms",
						method: "post"
					}, {
						scene: "105",
						mobile: that.bindData.mobile
					}).then(function(data) {
						if (data.code == 0) {
							t1 = setInterval(() => {
								if (time <= 0) {
									time = 60
									that.sendcodetext = '重新获取'
									that.isSend = false
									clearInterval(t1)

								} else {
									--time
									that.sendcodetext = time + 's'
								}
							}, 1000)
						} else {
							that.isSend = false
							clearInterval(t1)
						}
					})
				}

			},
			login() {
				var that = this
				if (!this.checked) {
					this.$util.msg("请先确认并同意《服务条款》和《隐私协议》")
					return
				}
				this.isDisabled = true
				this.request.httpTokenRequest({
					url: "user/bindMobile",
					method: "post"
				}, {
					mobile: this.bindData.mobile,
					code:this.bindData.code,
					type:'change'
				}).then(res => {
					if (res.code == 0) {
						uni.switchTab({
							url: '/pages/mine/mine'
						})
					} else {
						this.isDisabled = false
						this.$util.msg(res.msg)
						return
					}

				}, error => {})
			}
		}
	}
</script>

<style lang="scss">
	.pages{
		padding: 30rpx;
	}
	//手机号 输入框
	.phone-input {
		display: flex;
		align-items: center;
		height: 100rpx;
		background: #F1E3E3;
		border-radius: 30rpx;
		padding: 0 31rpx;
		margin-bottom: 30rpx;
		box-sizing: border-box;
		#view {
			text-align: right;
			flex: 1;
		}
		.left-area-code {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #787171;
			line-height: 56rpx;

			image {
				width: 16rpx;
				height: 10rpx;
				margin-left: 7rpx;
			}
		}

		.center-lines {
			width: 1rpx;
			height: 30rpx;
			background-color: #D3CACA;
			margin-left: 12rpx;
			margin-right: 40rpx;
		}

		.phone {
			font-size: 36rpx;
			font-family: PingFangSC, PingFang SC;
			color: #000000;
		}

		.input-box-phone {
			color: #000000;
			font-size: 30rpx;
		}

		//yanzhengma
		.code-input {
			width: 70%;
			font-size: 28rpx;
		}

		.sen-code-btn {
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			color: #000000;
			border: 0;

		}

		.success-send {
			color: $uni-button-affirm-color;
		}

		button {
			border: 0;
			background-color: rgba(0, 0, 0, 0);
			padding: 0;
		}

		button::after {
			border: 0;
		}

		.account-icon {
			width: 26rpx;
			height: 28rpx;
			margin-right: 22rpx;
		}

		.password-icon {
			width: 25rpx;
			height: 28rpx;
			margin-right: 22rpx;
		}

		//placeholder
		.placeholderStyle {
			color: #A89E9E;
			font-size: 28rpx;
		}

		.clear-icon {
			width: 28rpx;
			height: 28rpx;
			margin-left: auto;

		}

		.look-icon {
			width: 31rpx;
			height: 22rpx;
			margin-left: auto;
		}
	}

	// 登录按钮
	.login-btn {
		height: 100rpx;
		background: $uni-button-affirm-color;
		border-radius: 50rpx;
		font-size: 32rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 100rpx;
		text-align: center;
		outline: none;
	}
	//
	.login-agreement {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
		color: #000000;
		padding: 0 57rpx;
		font-size: 22rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #828182;
		margin-top: 20rpx;
		.choose-img {
			width: 24rpx;
			height: 24rpx;
			margin-right: 14rpx;
		}
	
		navigator {
			font-size: 22rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #EF5233;
		}
	}
	
</style>